<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>three.js examples</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/lhgdialog/lhgcore.lhgdialog.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
</head>
<style>


</style>
<body style="margin: 0">

<div class="Mbox"></div>

<div style="position: absolute;top: 0px; left: 0px" id="stat"></div>

<!--<div style="position: absolute; color: #d9edf7  ; top: 120px;">-->
<!--    选中着色器-->
<!--    <div class="color" style="background:#AA4631 " ></div>-->
<!--    <div class="color" style="background:#130AF2 " ></div>-->
<!--    <div class="color" style="background:#C5B49A " ></div>-->
<!--    <div class="color" style="background:#6A5ACD " ></div>-->
<!--    <div class="color" style="background:#E8C279 " ></div>-->
<!--</div>-->
<style>

    .color{
        background: #130AF2;
        width: 30px;
        height: 30px;
        border-radius: 4px;
        margin: 10px;
    }
</style>

<script  type="module">


    import * as THREE from './build/three.module.js';
    var width = window.innerWidth,
        height = window.innerHeight / 2;
    var size = 128;
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    var camera, scene, renderer, geometry, texture, mesh;

    function changeCanvas() {
        ctx.font = '20pt Arial';
        ctx.fillStyle = 'rgba(100,100,100,.1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        //ctx.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
        ctx.fillStyle = 'orange';
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("踏得网", canvas.width / 2, canvas.height / 2 - 12);
    }

    function init() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
        camera.position.z = 500;
        scene.add(camera);

        texture = new THREE.Texture(canvas);
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        geometry = new THREE.BoxGeometry(10, 200, 200);
        console.log(geometry.position)
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        canvas.width = canvas.height = size;
    }

    function animate() {
        requestAnimationFrame(animate);

        changeCanvas();
        texture.needsUpdate = true;
     mesh.rotation.y += 0.01;
        renderer.render(scene, camera);
    }

    init();
    animate();
</script>



<script>
    $(function(){
        let h  =$(window).height()
        $(".box").height(h)
        $(".left a ").eq(1).addClass("hover")
        $(".left a ").click(function(){
            $(".left a ").removeClass("hover")
            $(this).addClass("hover")

        })
    })

</script>

</body>
</html>
